{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
~}}

<KvPageHeader @breadcrumbs={{@breadcrumbs}} @pageTitle={{@path}}>
  <:syncDetails>
    {{#if this.syncStatus}}
      <Hds::Alert data-test-sync-alert @type="page" @color="neutral" @icon={{false}} as |A|>
        <A.Title>
          This secret has been synced from Vault to other destinations, updates to the secret will get automatically synced
          to destinations.
        </A.Title>

        {{#each this.syncStatus as |status|}}
          <A.Description data-test-sync-alert={{status.destinationName}}>
            <SyncStatusBadge @status={{status.syncStatus}} />
            <Hds::Link::Inline
              @route="syncDestination"
              @color="secondary"
              @isRouteExternal={{true}}
              @models={{array status.destinationType status.destinationName}}
            >
              {{status.destinationName}}
            </Hds::Link::Inline>
            - last updated
            {{date-format status.updatedAt "MMMM do yyyy, h:mm:ss a"}}
          </A.Description>
        {{/each}}

        <A.Button
          @icon={{if this.fetchSyncStatus.isRunning "loading"}}
          @text="Refresh"
          @color="secondary"
          {{on "click" (perform this.fetchSyncStatus)}}
        />
        <A.Link::Standalone
          @isHrefExternal={{true}}
          @icon="docs-link"
          @text="About sync statuses"
          @href={{doc-link "/vault/docs/sync#sync-statuses"}}
        />
      </Hds::Alert>
    {{/if}}
  </:syncDetails>

  <:tabLinks>
    <LinkTo @route="secret.details" data-test-secrets-tab="Secret">Secret</LinkTo>
    <LinkTo @route="secret.metadata.index" data-test-secrets-tab="Metadata">Metadata</LinkTo>
    <LinkTo @route="secret.paths" data-test-secrets-tab="Paths">Paths</LinkTo>
    {{#if @secret.canReadMetadata}}
      <LinkTo @route="secret.metadata.versions" data-test-secrets-tab="Version History">Version History</LinkTo>
    {{/if}}
  </:tabLinks>

  <:toolbarFilters>
    {{#unless this.emptyState}}
      <Toggle
        @name="json"
        @checked={{or this.showJsonView this.secretDataIsAdvanced}}
        @onChange={{fn (mut this.showJsonView)}}
        @disabled={{this.secretDataIsAdvanced}}
      >
        <span class="has-text-grey">JSON</span>
      </Toggle>
    {{/unless}}
  </:toolbarFilters>
  <:toolbarActions>
    {{#if this.showUndelete}}
      <Hds::Button
        @text="Undelete"
        @color="secondary"
        class="toolbar-button"
        data-test-kv-delete="undelete"
        {{on "click" this.undelete}}
      />
    {{/if}}
    {{#if this.showDelete}}
      <KvDeleteModal
        @mode="delete"
        @secret={{@secret}}
        @metadata={{@metadata}}
        @onDelete={{this.handleDestruction}}
        @version={{this.version}}
      />
    {{/if}}
    {{#if this.showDestroy}}
      <KvDeleteModal @mode="destroy" @secret={{@secret}} @onDelete={{this.handleDestruction}} @version={{this.version}} />
    {{/if}}
    {{#if (or @secret.canReadData @secret.canReadMetadata @secret.canEditData)}}
      <div class="toolbar-separator"></div>
    {{/if}}
    {{#if (and @secret.canReadData (eq @secret.state "created"))}}
      <CopySecretDropdown
        @clipboardText={{stringify @secret.secretData}}
        @onWrap={{perform this.wrapSecret}}
        @isWrapping={{this.wrapSecret.isRunning}}
        @wrappedData={{this.wrappedData}}
        @onClose={{this.clearWrappedData}}
      />
    {{/if}}
    {{#if @secret.canReadMetadata}}
      <KvVersionDropdown @displayVersion={{this.version}} @metadata={{@metadata}} @onClose={{this.closeVersionMenu}} />
    {{/if}}
    {{#if @secret.canEditData}}
      <ToolbarLink data-test-create-new-version @route="secret.details.edit" @type="add">Create new version</ToolbarLink>
    {{/if}}
  </:toolbarActions>
</KvPageHeader>

{{#if (or @secret.isSecretDeleted (not this.emptyState))}}
  <div class="info-table-row-header">
    <div class="info-table-row thead {{if this.showJsonView 'is-shadowless'}} ">
      {{#unless this.hideHeaders}}
        <div class="th column is-one-quarter">
          Key
        </div>
        <div class="th column">
          Value
        </div>
      {{/unless}}
      <div class="th column justify-right">
        {{#if (or @secret.isSecretDeleted @secret.createdTime)}}
          <KvTooltipTimestamp
            @text="Version {{if @secret.version @secret.version}} {{@secret.state}}"
            @timestamp={{(if @secret.isSecretDeleted @secret.deletionTime @secret.createdTime)}}
          />
        {{/if}}
      </div>
    </div>
  </div>
{{/if}}

{{#if this.emptyState}}
  <EmptyState @title={{this.emptyState.title}} @message={{this.emptyState.message}}>
    {{#if this.emptyState.link}}
      <DocLink @path={{this.emptyState.link}}>Learn more</DocLink>
    {{/if}}
  </EmptyState>
{{else}}
  <KvDataFields
    @showJson={{or this.showJsonView this.secretDataIsAdvanced}}
    @obscureJson={{this.secretDataIsAdvanced}}
    @secret={{@secret}}
    @modelValidations={{this.modelValidations}}
    @type="details"
  />
{{/if}}